import React from 'react';
import { Box, Container, Tab, Tabs, Grid } from '@mui/material';
import GameHero from '../components/GameHero';
import GameOverview from '../components/GameOverview';
import GameReviews from '../components/GameReviews';
import GameCard from '../components/GameCard';

// 示例数据
const gameData = {
  title: '赛博朋克 2077',
  coverImage: 'https://via.placeholder.com/1920x1080',
  thumbnailImage: 'https://via.placeholder.com/300x400',
  developer: 'CD PROJEKT RED',
  publisher: 'CD PROJEKT RED',
  releaseDate: '2020-12-10',
  rating: 4.5,
  reviewCount: 25631,
  price: '¥298',
  tags: ['角色扮演', '开放世界', '科幻', '动作'],
  description: '《赛博朋克2077》是一款开放世界动作冒险RPG游戏，故事发生在夜之城——一个被权力、魅力和身体改造所痴迷的巨型都市。你扮演一名野心勃勃的雇佣兵：V，正在追寻一种独一无二的植入体——获得永生的关键。',
  features: [
    '探索一个巨大的开放世界城市',
    '体验深度的角色定制系统',
    '享受快节奏的动作战斗',
    '体验引人入胜的主线剧情',
    '探索丰富的支线任务',
  ],
  screenshots: [
    'https://via.placeholder.com/1920x1080',
    'https://via.placeholder.com/1920x1080',
    'https://via.placeholder.com/1920x1080',
    'https://via.placeholder.com/1920x1080',
  ],
  systemRequirements: {
    minimum: {
      os: 'Windows 10',
      processor: 'Intel Core i5-3570K or AMD FX-8310',
      memory: '8 GB RAM',
      graphics: 'NVIDIA GeForce GTX 970 or AMD Radeon RX 470',
      storage: '70 GB 可用空间',
    },
    recommended: {
      os: 'Windows 10',
      processor: 'Intel Core i7-4790 or AMD Ryzen 3 3200G',
      memory: '12 GB RAM',
      graphics: 'NVIDIA GeForce GTX 1060 6GB or AMD Radeon RX 590',
      storage: '70 GB 可用空间',
    },
  },
};

const reviewStats = {
  averageRating: 4.5,
  totalReviews: 25631,
  ratingDistribution: [15000, 7000, 2000, 1000, 631],
};

const reviews = [
  {
    id: 1,
    user: {
      name: '玩家1',
      avatar: 'https://via.placeholder.com/40',
    },
    rating: 5,
    date: '2024-01-15',
    content: '这是一款非常优秀的游戏，画面精美，剧情丰富，玩法多样。虽然发售时有一些问题，但经过多次更新后，游戏体验已经非常完善。',
    helpfulCount: 156,
  },
  {
    id: 2,
    user: {
      name: '玩家2',
      avatar: 'https://via.placeholder.com/40',
    },
    rating: 4,
    date: '2024-01-14',
    content: '游戏整体很不错，但还是存在一些小bug，希望后续能继续优化。',
    helpfulCount: 89,
  },
];

const similarGames = [
  {
    id: 1,
    title: '巫师 3：狂猎',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['角色扮演', '开放世界', '奇幻'],
    rating: 4.9,
    price: '¥127',
  },
  {
    id: 2,
    title: '底特律：变人',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['冒险', '剧情', '科幻'],
    rating: 4.7,
    price: '¥198',
  },
];

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`game-tabpanel-${index}`}
      aria-labelledby={`game-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box>{children}</Box>
      )}
    </div>
  );
}

const GameDetail = () => {
  const [tabValue, setTabValue] = React.useState(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  return (
    <Box>
      <GameHero game={gameData} />
      
      <Container maxWidth="lg">
        <Grid container spacing={3}>
          <Grid item xs={12} md={8}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
              <Tabs
                value={tabValue}
                onChange={handleTabChange}
                aria-label="game details tabs"
              >
                <Tab label="概述" />
                <Tab label="评论" />
                <Tab label="相关内容" />
              </Tabs>
            </Box>

            <TabPanel value={tabValue} index={0}>
              <GameOverview game={gameData} />
            </TabPanel>
            <TabPanel value={tabValue} index={1}>
              <GameReviews stats={reviewStats} reviews={reviews} />
            </TabPanel>
            <TabPanel value={tabValue} index={2}>
              <Box sx={{ py: 4 }}>
                {/* 这里可以添加DLC、更新日志等相关内容 */}
              </Box>
            </TabPanel>
          </Grid>

          <Grid item xs={12} md={4}>
            <Box sx={{ position: 'sticky', top: 20 }}>
              {/* 游戏标签 */}
              <Box sx={{ mb: 4 }}>
                {/* 这里可以添加更多游戏标签和社交分享按钮 */}
              </Box>

              {/* 类似游戏推荐 */}
              <Box>
                <h3>类似游戏</h3>
                <Grid container spacing={2}>
                  {similarGames.map((game) => (
                    <Grid item xs={12} key={game.id}>
                      <GameCard game={game} />
                    </Grid>
                  ))}
                </Grid>
              </Box>
            </Box>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};

export default GameDetail;
